<template>
  <ElDrawer v-model="visible" direction="ttb" size="80%" :with-header="false" :lock-scroll="false">
    <ElForm ref="form" label-width="auto" :model="reg">
      <ElFormItem label="用户名" :rules="usernameRules" prop="username">
        <ElInput v-model="reg.username"></ElInput>
      </ElFormItem>
      <ElFormItem label="密码" :rules="passwordRules" prop="password">
        <ElInput v-model="reg.password" type="password"></ElInput>
      </ElFormItem>
      <ElFormItem label="再次输入密码" :rules="passwordExRules" prop="passwordEx">
        <ElInput v-model="reg.passwordEx" type="password"></ElInput>
      </ElFormItem>
      <ElFormItem label="昵称">
        <ElInput v-model="reg.nickname"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="registry()" class="login-button">注册</ElButton>
      </ElFormItem>
    </ElForm>
  </ElDrawer>
</template>
<script lang="ts">
export default defineComponent({
  name: 'SelfRegistry',
  emits: ['postInsert'],
  data() {
    return {
      visible: false,
      reg: {
        username: '',
        password: '',
        nickname: '',
        passwordEx: ''
      },

      usernameRules: [
        { required: true, message: 'username is required', trigger: ['blur', 'change'] },
        { min: 2, max: 10, message: '2-10', trigger: ['blur', 'change'] }
      ],
      passwordRules: [
        { required: true, message: 'password is required', trigger: ['blur', 'change'] },
        { min: 3, max: 10, message: '3-10', trigger: ['blur', 'change'] }
      ],
      passwordExRules: [{ validator: this.pwdExValidator, trigger: ['blur', 'change'] }]
    }
  },
  computed: {
    //   ...mapState(useMenuStore, ['userInfo'])
  },
  created() {},
  mounted() {
    // this.purchaseBill.items = []
  },
  methods: {
    // sampleM() {},
    show() {
      this.visible = true
    },
    pwdExValidator(a: any, b: any, cb: any) {
      console.log('xxxx', this.reg.passwordEx, this.reg.password)
      if (this.reg.passwordEx === this.reg.password) {
        cb()
      } else {
        cb(new Error('两次密码不一致'))
      }
    },
    async registry() {
      // if(this.reg.password !== this.passwordEx){
      //   ElMessage.error("两次密码不一致")
      //   return "";
      // }

      const res = await axios({
        method: 'post',
        url: '/pwd/register',
        data: this.reg
      })
      ElMessage.success('保存成功')
      this.$emit('postInsert', 1)
      this.visible = false
      // console.log(res.data)
    }
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 1000px;
  margin-left: 160px;
}
</style>
